import { Tooltip, Tag, notification, message } from 'antd';
import { FullscreenOutlined, QuestionCircleOutlined, AlertOutlined } from '@ant-design/icons';
import React from 'react';
import { Link, connect, ConnectProps } from 'umi';
import { ConnectState } from '@/models/connect';
import Avatar from './AvatarDropdown';
import styles from './index.less';
import NoticeIconView from './NoticeIconView';

export type SiderTheme = 'light' | 'dark';
export interface GlobalHeaderRightProps extends Partial<ConnectProps> {
  theme?: SiderTheme;
  layout: 'sidemenu' | 'topmenu';
}
const ENVTagColor = {
  dev: 'orange',
  test: 'green',
  pre: '#87d068',
};

let count = 0;
const key = 'updatable';

const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = (props) => {
  const { theme, layout } = props;
  let className = styles.right;

  if (theme === 'dark' && layout === 'topmenu') {
    className = `${styles.right}  ${styles.dark}`;
  }

  return (
    <div className={className}>
      <Tooltip title="测试">
        <a className={styles.action} onClick={() => {
          if (count == 0) {
            message.info({content: 'This is a normal message', key});
          }else if (count == 1) {
            message.success({content: 'This is a success message', key});
          }else if (count == 2) {
            message.error({content: 'This is an error message', key});
          }else if (count == 3) {
            message.warning({content: 'This is a warning message', key});
          }else {
            notification.error({
              message: 'Notification Title',
              description:
                'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
            });
          }
          count++;
        }}>
          <AlertOutlined />
        </a>
      </Tooltip>
      <Tooltip title="全屏">
        <a
          target="_blank"
          href="/screen"
          rel="noopener noreferrer"
          className={styles.action}
        >
          <FullscreenOutlined />
        </a>
      </Tooltip>
      <Tooltip title="使用文档">
        <a
          target="_blank"
          href="https://pro.ant.design/docs/getting-started"
          rel="noopener noreferrer"
          className={styles.action}
        >
          <QuestionCircleOutlined />
        </a>
      </Tooltip>
      <NoticeIconView />
      <Avatar menu />
      {REACT_APP_ENV && (
        <span>
          <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
        </span>
      )}
    </div>
  );
};

export default connect(({ settings }: ConnectState) => ({
  theme: settings.navTheme,
  layout: settings.layout,
}))(GlobalHeaderRight);
